<!--  -->
<template>
  <div class="addBack">
    <header>
      <span @click="quxiao">取消</span>
    </header>
    <main>
      <div class="top">
        <h4>添加银行卡</h4>
        <p>请绑定持卡人本人的银行卡</p>
      </div>
      <div class="box">
        <van-form @submit="onSubmit">
          <van-field
            v-model="bank"
            name="bank"
            label="开户行"
            placeholder="请输入开户行"
            :rules="[{ required: true, message: '请填写开户行' }]"
          />
          <van-field
            v-model="username"
            name="用户名"
            label="持卡人"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <van-field
            v-model="num"
            type="num"
            name="num"
            label="卡号"
            placeholder="持卡人本人银行卡号"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 66px;">
            <van-button
              round
              block
              type="info"
              native-type="submit"
              style="border-radius:20px ; 
               background:#474970; 
               border:#474970; 
               color:#fff; 
             "
              >下一步</van-button
            >
          </div>
        </van-form>
      </div>
    </main>
    <footer>
      <span>由连连支付提供</span>
    </footer>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      username: "",
      num: "",
      bank: "",
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("data", ["List"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    ...mapMutations("data", ["setList"]),
    onSubmit(values) {
      console.log("submit", values);
      this.setList(values);
      this.$router.push("/verificationCode");
    },
    quxiao() {
      console.log(this.$router.go(-1));
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.addBack {
  width: 100%;
  height: 100%;
}
.top {
  width: 100%;
  height: px2rem(100);
  margin-top: px2rem(100);
  line-height: px2rem(40);
  display: flex;
  flex-direction: column;
  align-items: center;
  h4 {
    font-size: px2rem(22);
    font-weight: bold;
  }
  p {
    font-size: px2rem(14);
  }
}
header {
  width: 100%;
  height: px2rem(50);
  background: #555882;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: flex-start;
  span {
    font-size: px2rem(16);
    margin: 3px;
  }
}
footer {
  width: 100%;
  height: px2rem(30);
  position: fixed;
  bottom: px2rem(130);
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    font-size: px2rem(14);
    color: #333333;
  }
}
</style>
